import React, { useState, useMemo, memo } from 'react';
import { Modal, Menu, Dropdown, message, Table, Button } from 'antd';
import styles from './index.less';
import useMonitoringModel from '../../useModels/useMonitoringModel.js';
import MonitorContent from './content';

export default memo(props => {
  const model = useMonitoringModel(model => [
    model.monitoringVisible,
    model.suItemData,
    model.websocket,
  ]);
  const { monitoringVisible, suItemData, websocket, setMonitorState } = model;

  const handleCancel = e => {
    //断开
    if (websocket) {
      websocket.disconnect();
    }
    setMonitorState({
      monitoringVisible: false,
      websocket: null,
    });
  };

  return (
    <Modal
      className={styles['modal-wrap']}
      centered={true}
      title={
        <span>
          <span style={{ fontSize: '16px', fontWeight: 'bolder' }}>设备监控</span>
          {suItemData?.suId && (
            <span style={{ fontSize: '14px', color: '#666' }}>{`(${suItemData?.suId})`}</span>
          )}
        </span>
      }
      width={'80%'}
      visible={monitoringVisible}
      footer={false}
      destroyOnClose={true}
      onCancel={handleCancel}
    >
      <MonitorContent />
    </Modal>
  );
});
